import React, { useEffect } from 'react'
import './Css/Real_time_data.css'
import * as echarts from 'echarts';
import { DatePicker, Space } from 'antd';
import type { DatePickerProps, GetProps } from 'antd';

type RangePickerProps = GetProps<typeof DatePicker.RangePicker>;

const { RangePicker } = DatePicker;

const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
    console.log('onOk: ', value);
};



export default function Order_statistics(props) {

    useEffect(() => {
        box1()
    }, [])
    const box1 = () => {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [12,32,42, 12,36,12,46,1,29,12,92,12],
                    type: 'line',
                    areaStyle: {}
                }
            ]
        };
        option && myChart.setOption(option);
    }



    return (
        <div className='Real_time_data'>
            <div className='Real_time_data_title'>
                <p>{props.name}</p>
                <p >
                    <span style={{ fontSize: '0.3rem' }}>本周 &nbsp; &nbsp;</span>
                    <span style={{ fontSize: '0.3rem' }}>本月 &nbsp; &nbsp;</span>
                    <span style={{ fontSize: '0.3rem' }}>全年 &nbsp; &nbsp;</span>
                    <RangePicker
                        showTime={{ format: 'HH:mm' }}
                        format="YYYY-MM-DD HH:mm"
                        onChange={(value, dateString) => {
                            console.log('Selected Time: ', value);
                            console.log('Formatted Selected Time: ', dateString);
                        }}
                        onOk={onOk}
                    />
                    &nbsp; &nbsp;
                </p>
            </div>
            <div>
                <p style={{ marginLeft: '0.5rem', marginTop: '0.2rem' }}>{props.count}: <span style={{ fontSize: '0.5rem' }}>359</span> 同比</p>
                <div style={{ width: '100%', height: '300px' }} id="main"></div>
            </div>



        </div>
    )
}
